<template>
  <view>
    <view style="display: flex;margin-top: 80rpx;">
      <button @click="lastWeek"> 上一周 </button> <text style="font-size: 22px;">第{{ weekDay }}周</text> <button @click="nextWeek"> 下一周 </button>
    </view>

    <table style="width:90%;height: 60vh;margin-top: 10rpx;margin-left: 5%;">
      <thead>
      <tr style="background-color: #ccc">
        <th>时间</th>
        <th>一</th>
        <th>二</th>
        <th>三</th>
        <th>四</th>
        <th>五</th>
        <th>六</th>
        <th>日</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td>{{ item.time }}</td>
        <td>{{ item.monday }}</td>
        <td>{{ item.tuesday }}</td>
        <td>{{ item.wednesday }}</td>
        <td>{{ item.thursday }}</td>
        <td>{{ item.friday }}</td>
        <td>{{ item.saturday }}</td>
        <td>{{ item.sunday }}</td>
      </tr>
      </tbody>
    </table>
    <view style="display: flex;margin-top: 60rpx;">
      <button class="button" @click="goToChooseCourse()">选课</button>
      <button class="button" @click="goToMyCourse()">我的课程</button>
    </view>

  </view>
</template>
<script>
import student from '@/api/student/index.js'
import store from '@/store'
export default {
  data() {
    return {
      weekDay: 1,
      timeData: [
        {time: '8:25-10:00'},
        {time: '10:25-12:00'},
        {time: '14:30-16:00'},
        {time: '16:25-18:00'},
        {time: '19:00-20:25'},
      ],
      tableData: []
    }
  },
  methods: {
    goToChooseCourse() {
      uni.navigateTo({
        url: '/pages/myCourse/choose', // 跳转的目标页面路径
      });
    },
    goToMyCourse() {
      uni.navigateTo({
        url: '/pages/myCourse/course', // 跳转的目标页面路径
      });
    },
    async getTable () {
      try {
        const res = await student.getStudentCourseTable(this.weekDay)
        this.tableData = res.data
        this.tableData = this.tableData.map((obj,index) => ({
          ...obj,
          time: this.timeData[index].time
        }));
        // 处理响应数据
        console.log('课表数据:', this.tableData)
      } catch (error) {
        // 处理错误
        console.error('错误:', error)
      }
    },
    async lastWeek () {
      if (this.weekDay > 1)
      {
        this.weekDay = this.weekDay - 1
        await this.getTable()
      }
    },
    async nextWeek () {
      if (this.weekDay < 20)
      {
        this.weekDay = this.weekDay + 1
        await this.getTable()
      }
    }
  },
  async onLoad () {
    await this.getTable()
  }
}
</script>
<style>
.button {
  border: 0;
  background-color: #409EFF;
  color: white;
  width: 180rpx;
  font-size: 14px;
}
table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  font-size: 12px;
}

th, td {
  border: 1px solid #ddd;
  padding: 5px;
  text-align: center;
  word-wrap: break-word;
  white-space: pre-line;

}
td {
  height: 120rpx;
}
</style>